{extend name='admin@public/content'}
{/block}
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all" />
    <style type="text/css">
        form{
            margin:30px;
        }
        .keys-container{min-width:800px}
        .keys-container textarea{width:95%;height:100px;border-radius:0}
        .keys-container .input-group input{border-right:0}
        .keys-container .input-group-addon{border-left:0;border-radius:0}
        .keys-container [data-tips-image]{width:112px;height:auto;}
        .keys-container .layui-elem-field{width:100%;height:100px;position:absolute}
        .tangram-suggestion-main {z-index: 99999;}
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
{block name="content"}
<!-- 效果预览区域 结束 -->

<div class="row keys-container">
    <div class='col-xs-11 margin-left-15'>
        <form class="form-horizontal layui-form" role="form" data-auto="true" action="/admin/adminshop/editPost" method="post">
            <fieldset style="width:100%;height:2000px" class="layui-elem-field layui-box">
                <legend>{$title}&nbsp;&nbsp;&nbsp;<a class="pull-right menu-item-deleted layui-btn layui-btn-sm layui-btn-danger" data-open='{:url("$classuri/shopImg")}?id={$info.id}'>店铺环境图片</a></legend>
                <input type="hidden" value="{$info.id} " name='id'>
                <div class="form-group">
                    <label class="col-xs-2 control-label layui-form-label ">店铺名称 </label>
                    <div class="col-xs-4">
                        <input required title='请输入店铺名称' maxlength='20' name='name' class="layui-input" value='{$info.name|default="暂无"}' >
                    </div>
                    <label>
                        <img data-tips-image="/static/theme/img/rqcode/shoprqcode{$info['id']}.png" src="/static/theme/img/rqcode/shoprqcode{$info['id']}.png" width="100px" height="100px">
                        <a class="layui-btn layui-bg-red" href="/static/theme/img/rqcode/shoprqcode{$info['id']}.png" download="{$info.name}" title="点击下载店铺二维码">点击下载店铺二维码</a>
                    </label>
                </div>

                <div class="form-group">
                    <label class="col-xs-2 control-label layui-form-label ">店铺账号</label>
                    <div class="col-xs-4">
                        <input required title='请输入店铺账号' maxlength='20' name='username' class="layui-input" value='{$info.username|default=""}'>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-xs-2 control-label layui-form-label ">缩略图</label>
                    <div  style="min-height:1px;">
                        <div class="container col-xs-5">
                            <div class="row">
                                <div class="layui-upload-list col-xs-5">
                                    <div style=" min-height:1px;line-height:160px;text-align:center;position:relative;" ontouchstart="">
                                        <div class="cover-wrap" style="display:none;position:fixed;left:0;top:0;width:100%;height:100%;background: rgba(0, 0, 0, 0.4);z-index: 10000000;text-align:center;">
                                            <div class="" style="width:900px;height:600px;margin:100px auto;background-color:#FFFFFF;overflow: hidden;border-radius:4px;">
                                                <div id="clipArea" style="margin:10px;height: 520px;"></div>
                                                <div class="col-xs-5" style="height:56px;line-height:36px;text-align: center;padding-top:8px;">
                                                    <input id="clipBtn" style="width:120px;height: 36px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align: center;line-height: 36px;outline: none;" value="保存封面">
                                                </div>
                                            </div>
                                        </div>

                                        <input data-tips-image="{$info.picurl|default='0'}" id="view"  style="width:750px;height:322px; background-image: url({$info.picurl|default='0'})" title="请上传 750*200 的封面图片" >
                                        <div style="height:10px;"></div>
                                        <div class="" style="width:140px;height:32px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align:center;line-height:32px;outline:none;margin-left:37px;position:relative;">
                                            点击上传图片
                                            <input type="file" id="file" style="cursor:pointer;opacity:0;filter:alpha(opacity=0);width:100%;height:100%;position:absolute;top:0;left:0;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="pictureid" id="img" value="{$info.thumb|default='0'}">
                </div>

                <div class="form-group">
                    <label class="col-xs-2 control-label layui-form-label ">新 密 码</label>
                    <div class="col-xs-4">
                        <input required type="password"  title='请输入新密码' maxlength='20' name='password' class="layui-input" value='{$info.password|default=""}'>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-xs-2 control-label layui-form-label ">联系方式</label>
                    <div class="col-xs-4">
                        <input  title='请输入联系方式' maxlength='11' name='tel' class="layui-input" value='{$info.tel|default=""}'>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-xs-2 control-label layui-form-label ">手 机 号</label>
                    <div class="col-xs-4">
                        <input  title='请输入手机号' maxlength='11' name='bind_mobile' class="layui-input" value='{$info.bind_mobile|default=""}'>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-xs-2 control-label layui-form-label ">营业时间</label>
                    <div class="col-xs-8">
                        <input required title='请输入营业时间'name='shophours' class="layui-input" value='{$info.shophours|default=""}'>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-xs-2 control-label layui-form-label ">推荐</label>
                    <div class="col-xs-8">
                        <input  title='请输入推荐' name='push' class="layui-input" value='{$info.push|default="暂无"}' readonly="true" >
                    </div>
                </div>

                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">类别</label>
                    <div class="layui-input-inline">
                        <select name="type_id" class="layui-select">
                            <option value="">状态</option>
                            {foreach($type as $v)}
                            {if $info.type_id eq $v.id}
                            <option selected="selected" value="{$v.id}">{$v.name}</option>
                            {else}
                            <option value="{$v.id}">{$v.name}</option>
                            {/if}
                            {/foreach}
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-xs-2 control-label layui-form-label ">介绍</label>
                    <div class="col-xs-8">
                        <input  title='请输入介绍'  id="description" name='description' class="layui-input" value='{$info.description|default="暂无"}' >
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-2 control-label layui-form-label ">人均消费</label>
                    <div class="col-xs-2">
                        <input  title='请输入人均消费'  name='consumption' class="layui-input" value='{$info.consumption|default="暂无"}'>
                    </div>
                </div>

                <div class="layui-form-item" >
                    <div class="layui-input-inline">
                        <label class="layui-form-label">所在省份：</label>
                        <div class="layui-input-block" >
                            <select name="province" id="province"  lay-filter="myselect">
                                {foreach($info['area_list']['provincelist'] as $k=>$v)}
                                {if $info['area_list']['province']['ID'] eq $v['ID']}
                                <option selected="selected" value="{$v['ID']}">{$v['ShortName']}</option>
                                {else}
                                <option value="{$v['ID']}">{$v['ShortName']}</option>
                                {/if}
                                {/foreach}
                                            </select>
                        </div>
                    </div>

                    <div class="layui-input-inline">
                        <label class="layui-form-label">所在城市 ：</label>
                        <div class="layui-input-block">
                            <select name="City" id="City" lay-filter="myselect2" >
                                {foreach($info['area_list']['Citylist'] as $k=>$v)}
                                {if $info['area_list']['City']['ID'] eq $v['ID']}
                                <option selected="selected" value="{$v['ID']}">{$v['ShortName']}</option>
                                {else}
                                <option value="{$v['ID']}">{$v['ShortName']}</option>
                                {/if}
                                {/foreach}
                            </select>
                        </div>
                    </div>

                    <div class="layui-input-inline">
                        <label class="layui-form-label">所在区域 ：</label>
                        <div class="layui-input-block">
                            <select name="Area" id="Area" lay-filter="myselect3">
                                {foreach($info['area_list']['Arealist'] as $k=>$v)}
                                {if $info['area_list']['Area']['ID'] eq $v['ID']}
                                <option selected="selected" value="{$v['ID']}">{$v['ShortName']}</option>
                                {else}
                                <option value="{$v['ID']}">{$v['ShortName']}</option>
                                {/if}
                                {/foreach}
                            </select>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-xs-2 control-label layui-form-label ">详细地址</label>
                    <div class="col-xs-8">
                        <input  title='请输入详细地址'  name='address' class="layui-input" value='{$info.address|default="暂无"}' >
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label layui-form-label">经纬度:</label>
                    <div class="col-xs-8">
                        <input type="text"  readonly="readonly" class="form-control" id="lng" name="lng" value="{$info.lng}">
                        <br/>
                        <input type="text"  readonly="readonly" class="form-control"  id="lat"  name="lat" value="{$info.lat}">
                    </div>
                </div>

                <div class="form-group">
                    <label  class="col-sm-2 control-label layui-form-label">定位:</label>
                    <div class="col-xs-8">
                        <div id="r-result"><input type="text" id="suggestId" class="form-control" /></div>
                        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                        <div id="allmap" style="height: 600px;width:90%"></div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="status" value="1" title="正常" <?php if($info['status'] == 1){?>checked<?php }?>>
                        <input type="radio" name="status" value="0" title="待审核" <?php if($info['status'] == 0){?>checked<?php }?>>
                        <input type="radio" name="status" value="2" title="锁定" <?php if($info['status'] == 2){?>checked<?php }?>>
                    </div>
                </div>
                <div class="text-center padding-bottom-10" style="position:absolute;bottom:0;width:100%;">
                    <div class="hr-line-dashed" style="margin:10px 0"></div>
                    <button style="" class="layui-btn menu-submit">保存数据</button>
                    <!--{if !isset($vo.keys) || !in_array($vo.keys,['default','subscribe'])}-->
                    <button data-cancel-edit class="layui-btn layui-btn-danger" type='button'>取消编辑</button>
                    <!--{/if}-->
                </div>
                {if isset($vo['id'])}<input type='hidden' value='{$vo.id}' name='id'>{/if}
            </fieldset>
        </form>
    </div>
</div>
<head>
    <meta charset="utf-8">

</head>
<body>
</body>
{/block}
<script charset="UTF-8" src="\static\layui\layui.js"></script>
{block name="script"}
<script type="text/javascript">

    $(document).ready(function(){
        var map = new BMap.Map("allmap");
        map.centerAndZoom("重庆",12);
        map.enableScrollWheelZoom(true);
        var lng =  document.getElementById("lng").value;
        var lat =  document.getElementById("lat").value;
        var point = new BMap.Point(lng,lat);
        var marker = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker);               // 将标注添加到地图中
        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        // 百度地图API功能
        function G(id) {
            return document.getElementById(id);
        }

        var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
            {"input" : "suggestId"
                ,"location" : map
            });

        ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
            var str = "";
            var _value = e.fromitem.value;
            var value = "";
            if (e.fromitem.index > -1) {
                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            }
            str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

            value = "";
            if (e.toitem.index > -1) {
                _value = e.toitem.value;
                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            }
            str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
            G("searchResultPanel").innerHTML = str;
        });

        var myValue;
        ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
            var _value = e.item.value;
            myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

            setPlace();
        });

        function setPlace(){
            map.clearOverlays();    //清除地图上所有覆盖物
            function myFun(){
                var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                console.log(pp);
                map.centerAndZoom(pp, 18);
                map.addOverlay(new BMap.Marker(pp));    //添加标注
            }
            var local = new BMap.LocalSearch(map, { //智能搜索
                onSearchComplete: myFun
            });
            local.search(myValue);
        }

        // 百度地图API功能
        //单击获取点击的经纬度
        map.addEventListener("click",function(e){
            var intrue =  document.getElementById("lat").value;

            if (intrue) {
                if(confirm("确定要该门店修改经纬度吗")){
                    map.clearOverlays();    //清除地图上所有覆盖物
                    var point = new BMap.Point(e.point.lng,e.point.lat);
                    var marker = new BMap.Marker(point);  // 创建标注
                    map.addOverlay(marker);               // 将标注添加到地图中
                    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                    document.getElementById("lat").value=e.point.lat;
                    document.getElementById("lng").value=e.point.lng;
                }
            }else{
                var point = new BMap.Point(e.point.lng,e.point.lat);
                var marker = new BMap.Marker(point);  // 创建标注
                map.addOverlay(marker);               // 将标注添加到地图中
                marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                document.getElementById("lat").value=e.point.lat;
                document.getElementById("lng").value=e.point.lng;
            }

        });
        $('#suggestId').on('click',function () {
            $('#tangram-suggestion--TANGRAM__1e-main').css( "zIndex", 999);
        })
    });

    $(function () {
        layui.use(['layer', 'form'], function(){
            var layer = layui.layer
                ,form = layui.form;
            form.render();
            form.on('select(myselect)', function(data){
                var areaId = (data.value);
                $.ajax({
                    type: 'get',
                    url: '/admin/Adminshop/getarea',
                    data: {pid:areaId},
                    dataType:  'json',
                    success: function(data){
                        $("#City").html("");
                        $.each(data, function(key, val) {
                            var option1 = $("<option>").val(val.ID).text(val.ShortName);
                            $("#City").append(option1);
                            form.render('select');
                        });
                        $("#City").get(0).selectedIndex=0;
                    }
                });
            });
            form.on('select(myselect2)', function(data){
                var areaId = (data.value);
                $.ajax({
                    type: 'get',
                    url: '/admin/Adminshop/getarea',
                    data: {pid:areaId},
                    dataType:  'json',
                    success: function(data){
                        $("#Area").html("");
                        $.each(data, function(key, val) {
                            var option1 = $("<option>").val(val.ID).text(val.ShortName);
                            $("#Area").append(option1);
                            form.render('select');
                        });
                        $("#Area").get(0).selectedIndex=0;
                    }
                });
            });
        });
    })
    $(function(){
        //图片裁剪上传
        var clipArea = new bjj.PhotoClip("#clipArea", {
            size: [750, 322],// 截取框的宽和高组成的数组。默认值为[260,260]
            outputSize: [750, 322], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
            //outputType: "jpg", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
            file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
            view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
            ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
            loadStart: function() {
                // 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入
                $('.cover-wrap').fadeIn();
                console.log("照片读取中");
            },
            loadComplete: function() {
                // 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入
                console.log("照片读取完成");
            },
            //loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入
            clipFinish: function(dataURL) {
                // 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入
                $('.cover-wrap').fadeOut();
                $('#view').css('background-size','100% 100%');
                //图片上传 base64
                $.ajax({
                    url: '/admin/adminoss/index',
                    type: 'POST',
                    data: dataURL,                    // 上传formdata封装的数据
                    dataType: 'JSON',
                    processData: false, //告诉jquery不要发送数据
                    contentType: false, //不要射中content-type
                    success:function (data) {           //成功回调
                        if(data.id !=''){
                            $('#img').val(data.id);
                            layer.msg('上传成功');
                        }else{
                            layer.msg('上传失败，请联系管理员');
                        }
                    }
                });
            }
        });
        document.getElementById('allmap').style.display = 'block';
    });

    $(function (){
        var $body = $('body');
        /*! 取消编辑 */
        $('[data-cancel-edit]').on('click', function (){
            var dialogIndex = $.msg.confirm('确定取消编辑吗？', function (){
                history.back();
                $.msg.close(dialogIndex);
            });
        });
        // 默认事件触发
        $('input[name=type]:checked').map(function (){
            $(this).trigger('click');
        });
    });

</script>
{/block}
